<template>
    <!-- 常用校验 -->
    <div class="rule-tool">
        <t-modal :visible="isModalVisible" title="选择报表" width="1100px" @ok="() => confirm()"
            @cancel="() => (isModalVisible = false)">
            <a-row :gutter="10">
                <a-col :md="6" :sm="24">
                    <a-card :bordered="false">
                        <TableClassify title="报表分类" :treeData="classifyData"
                            :replaceFields="{ title: 'classificationName', key: 'classificationCode' }"
                            :loading="masterConfirmLoading" searchPlaceholder="分类名称" searchFieldName="classificationName"
                            @select="masterRowClick">
                        </TableClassify>
                    </a-card>
                </a-col>
                <a-col :md="18" :sm="24">
                    <tool-bar @search="$refs.subList.refresh(true)" @reset="() => {
                            (
                                subQueryParam = masterListCode ? {
                                    code: masterListCode
                                } : {}),
                            $refs.subList.refresh(true);
                        }
                        ">
                        <template slot="toolForm">
                            <a-form-item label="报表名称" style="display: flex;" :labelCol="{span: 7}">
                                <a-input v-model="subQueryParam.dataReportName" placeholder="请输入报表名称" />
                            </a-form-item>
                            <a-form-item label="报表编码" style="display: flex;" :labelCol="{span: 7}">
                                <a-input v-model="subQueryParam.dataReportCode" placeholder="请输入报表编码" />
                            </a-form-item>
                        </template>
                    </tool-bar>
                    <DataGrid :url="url" :queryParam="subQueryParam" :columns="columns" type="sub"
                        ref="subList" rowKey="uuid" :scroll="{ y: 500 }" @rowClick="rowClick"
                        @onSelectChange="onSelectChange">
                        <span slot="renderDataReportName" slot-scope="{ text, record, index }">
                            {{ text | nameFilter }}
                        </span>
                    </DataGrid>
                </a-col>
            </a-row>
            <span style="display: block;height: 50px;"></span>
        </t-modal>
    </div>
</template>
<script>
import { TableClassify, DataGrid } from "@/components";
const columns = [
    {
        title: "报表名称",
        dataIndex: "dataReportName",
        width: 200,
        scopedSlots: {
            customRender: "renderDataReportName",
        },
    },
    {
        title: "报表编码",
        dataIndex: "dataReportCode",
        width: 80,
    },
    {
        title: "所属分类",
        dataIndex: "classificationName",
        langCode: "className2",
        width: 80,
    },
];
const data = [];
export default {
    components: {
        TableClassify,
        DataGrid
    },
    filters: {
        nameFilter(val) {
            if (val) {
                return val.replace('.ureport.xml', '')
            }
            return val;
        },
    },
    data() {
        return {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 12 },
            },
            isModalVisible: false,
            columns,
            data,
            selectId: "",
            selected: "",
            masterConfirmLoading: false,
            classifyData: [],
            url: {
                masterList: "/report/reportClassification/selectAll",
                subList: "/report/templet/getPageSet",
                subSave: "/report/templet/save",
                subUpdate: "/report/templet/update",
                subDelete: "/report/templet/deleteBatch",
            },
            subQueryParam: {},
            masterListCode: ""
        }
    },
    Created() {
        // 防止表单未注册

    },

    methods: {
        //分类行点击
        masterRowClick(e) {
            this.subQueryParam['code'] = e[0]
            this.masterListCode = e[0]
            this.$refs.subList.rows = null
            this.$refs.subList.refresh()
        },
        confirm() {
            if (!this.selected) {
                this.$message.warn("请选择报表")
                return
            }
            this.$emit('confirm', this.selected)
            this.isModalVisible = false
        },
        showModal() {
            this.isModalVisible = true;
            this.getData()
        },
        getData() {
            this.masterConfirmLoading = true
            this.$post('/report/reportClassification/selectAll', {}).then(res => {
                if (res) {
                    this.classifyData = res
                    this.masterConfirmLoading = false
                }
            })
        },
        rowClick(record, index, rowKeys) {
            let selectedRowKeys = this.$refs.subList.selectedRowKeys;
            let selectedRows = this.$refs.subList.selectedRows;
            selectedRowKeys.push(rowKeys)
            selectedRows.push(record)
            this.$refs.subList.onSelectChange( selectedRowKeys, selectedRows)
        },
        onSelectChange(selectedRowKeys, selectedRows) {
            this.selected = selectedRowKeys;
            this.selected = selectedRows;
        }
    },
}
</script>
<style lang="scss" scoped>
/deep/ .ant-form-item .ant-col:last-child {
    width: 100%;
}
</style>
